<template>
    <div class="center">
        <elewarp>
            <span slot="search-header">数据筛选</span>
            <el-form slot="search" :inline="true" :model="search" class="demo-form-inline" ref="searchform">
                <el-form-item label="主题" prop="bTC_Name">
                    <el-input v-model="search.bTC_Name" placeholder="主题"></el-input>
                </el-form-item>
                <el-form-item label="学生" prop="bSID">
                    <el-select v-model="search.bSID" placeholder="请选择学生" @clear="clearOptions" clearable filterable :filter-method="filterMethod">
                        <el-option :label="item.SName" :value="item.SID" v-for="item in options" :key="item.SID"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="教师" prop="bTID">
                    <el-select v-model="search.bTID" placeholder="请选择教师">
                        <el-option :label="item.T_Name" :value="item.TID" v-for="item in teacherList" :key="item.TID"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button @click="onReset">重置</el-button>
                </el-form-item>
            </el-form>
            <div slot="table-header">
                <span>教案中心列表</span>
                <el-button style="float: right;">导出</el-button>
                <el-button @click="addStudyInfo" style="float: right; margin-right:10px;" type="primary">添加</el-button>
            </div>
            <div slot="table">
                <ul class="card-list">
                    <li class="card-item" style="margin-bottom:20px;"  v-for="(item, index) in lists" :key="index">
                        <el-card :body-style="{ padding: '0px' }">
                            <div style="width:310px;height:300px;">
                                <img width="310px" height="300px" :src="item.TC_Photo" class="image pointer" title="点击查看" @click="lookinfo(item)">
                            </div>
                            <div style="padding: 14px;">
                                <h3>主题：{{item.TC_Name}}</h3>
                                <ul style="font-size:12px;">
                                    <li>
                                        <span>学生：</span>
                                        <span>{{item.SID | getStudyName(studyList)}}</span>
                                    </li>
                                    <li>
                                        <span>班级：</span>
                                        <span>{{item.Class}}</span>
                                    </li>
                                    <li>
                                        <span>授课人：</span>
                                        <span>{{item.TID | getTeacherName(teacherList)}}</span>
                                    </li>
                                    <li>
                                        <span>发布时间：</span>
                                        <span>{{item.TC_Time}}</span>
                                    </li>
                                </ul>
                                <p class="t-r">
                                    <el-button title="删除" @click="handleClickdelete(item)"  style="padding:0px;" type="text" class="button"><i class="el-icon-delete"></i></el-button>
                                    <el-button title="编辑" @click="handleClickedit(item)" style="padding:0px;" type="text" class="button"><i class="el-icon-edit"></i></el-button>
                                </p>
                            </div>
                        </el-card>
                    </li>
                </ul>
                <div class="bottom-pages clearfix">
                    <div class="fr">
                        <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[9, 15, 21, 30]"
                        :page-size="pageSize"
                        :pager-count="5"
                        layout="total, sizes, prev, pager, next"
                        :total="count">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </elewarp>
        <!-- <ele-add-study ref="addstudy"></ele-add-study> -->
    </div>
</template>

<script>
import elewarp from '@/components/warp-slot.vue'
import {getCenterList,deletCenterList} from '@/api/index.js'
export default {
    name: 'center',
    components: {
        elewarp,
        // eleAddStudy
    },
    data() {
        return {
            search:{
                bTC_Name:'',
                bSID:'',
                bTID:''
            },
            count:0,
            pageSize:9,
            lists:[],
            options:[],
            currentPage:1,
            tableSelection:[]
        }
    },
    computed:{
        teacherList() {
            return this.$store.state.allTeacherList;
        },
        studyList() {
            return this.$store.state.allStudyList;
        }
    },
    watch:{
        studyList:{
            immediate:true,
            handler:function(val) {
                this.options = val;
            },
            deep:true
        }
    },
    created() {
        this._getCenterList()
    },
    methods:{
        onSubmit(){
            this._getCenterList()
        },
        onReset(){
            this.clearOptions();
            this.$refs.searchform.resetFields();
            this._getCenterList();
        },
        filterMethod(query){
            if (query !== '') {
                this.options = this.studyList.filter(item => {
                return item.SName.toLowerCase()
                    .indexOf(query.toLowerCase()) > -1;
                });
            } else {
                this.options = this.studyList;
            }
        },
        clearOptions(){
            this.options = this.studyList;
        },
        _getCenterList() {
            let params = {
                ...this.search,
                bPage:(this.currentPage - 1) * this.pageSize + 1,
                bPage1:this.currentPage * this.pageSize,
                bSort:'',
                bSx:''
            }
            getCenterList(params).then((res) => {
                if(res) {
                    this.lists = res.tableData;
                    this.count = res.total_rows;
                }
            })
        },
        handleSizeChange(val){
            this.pageSize = val;
            this._getCenterList()
        },
        handleCurrentChange(val){
            this.currentPage = val;
            this._getCenterList()
        },
        // 查看信息
        lookinfo(row) {
            console.log(row)
            this.$router.push({path:'/center/center-des',query:{id:row.TCID}})
        },
        // 编辑
        handleClickedit(row){
            console.log(row)
            this.$router.push({path:'/center/centerAdd',query:{id:row.TCID}})
        },
        // 删除
        handleClickdelete(row){
            this.$util.openTips.call(this,'是否确定删除？')
            .then((res) => {
                deletCenterList({bTCID:row.TCID}).then((res) => {
                    if(res) {
                        this.$util.tipsMsg('success','删除成功！');
                        this._getCenterList()
                    }
                })
            }).catch((err) => {
                console.log(err)
            })
        },
        // 添加学生
        addStudyInfo(){
            // this.$refs.addstudy.dialogVisible = true;
            this.$router.push({path:'/center/centerAdd'})
        }
    }
}
</script>
<style lang="less" scoped>
.card-list{
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-around;
    .card-item{
        margin: 0 21px;
        h3{
            font-weight: 600;
        }
        width:310px;
    }
}
</style>
